{extend name="index@common/base"/} 
{block name="style"}
<link rel="stylesheet" href="__CSS__/rehearse/simulation.css">
{/block} 
{block name="body"}
<div class="layui-body layui-tab-content index-body" id="cont">
	<div class="park-navigation">
		<div class="navigation-icon">
			<i class="fa {$breadCrumb[0]['icon']}"></i>
		</div>
		<div class="navigation-menu">
			<h2>{$breadCrumb[0]['title']}</h2>
			{if isset($breadCrumb[1])}
			<p>{$breadCrumb[0]['remark']}</p>
			{/if}
		</div>
		<div class="navigation-page">
			<ul>
				<li class="this" data-type="alarm">事件接报</li>
				<li data-type="events">事件列表</li>
			</ul>
		</div>
	</div>
    <div class="park-content" id="page-alarm">
    	<div class="content-title">
			<div class="title">
				<h3>{$breadCrumb[1]['title']}</h3>
			</div>
		</div>
		<div class="layui-content" id="alarm_view">
			<div class="maintab">
				<form class="layui-form layui-clear" id="crimForm" action="{:url('duty/event/add')}"  lay-filter="event">
			    	<div class="layui-form-item">
			       		<div class="layui-inline">
			            	<label class="layui-form-label">事发企业&nbsp;<i class="layui-icon arrow">&#xe642;</i></label>
			            		<div class="layui-input-inline">
			                      <select name="enterpriseId" lay-filter="linkage" data-url="{:url('admin/ajax.enterprise/getDangerSourceList')}" data-child="DangerSourceId" lay-verify="required" id="enterprise" class="company">					
									<option></option>
									{volist name="enterpriseList" id="item"}
									<option value="{$key}">{$item}</option>{/volist}
			                      </select>
			                  </div>
			            </div>
			            <div class="layui-inline">
			                <label class="layui-form-label">危险源&nbsp;<i class="layui-icon arrow">&#xe642;</i></label>
			                <div class="layui-input-inline" style="width: 355px">
			 					<select name="dangerSourceId" id="DangerSourceId"  lay-verify="required" class="DangerSourceId" lay-filter="dangersource"></select>
			                </div>
			            </div>
			            <div class="layui-inline">
			                <label class="layui-form-label">灾情类别&nbsp;<i class="layui-icon arrow">&#xe642;</i></label>
			                	<div class="layui-input-inline" style="width: 355px">
			                     	<select name="eventTypeId" lay-verify="required" id="eventType"  lay-filter="eventtype" class="eventtype">
										<option ></option>
										{volist name="type" id="vo" key="k"}
										<option value="{$k}">{$vo}</option>{/volist}
									</select>
			                 	</div>
			            </div>
			            <div class="layui-inline" style="display: none">
			                <label class="layui-form-label">位置<small>经纬度</small><i class="layui-icon arrow">&#xe642;</i></label>
			                <div class="layui-input-inline" style="width: 215px">
			                    <input class="layui-input" name="LatitudeLongitude" data-set="LatitudeLongitude" placeholder="请选择经纬度" readonly lay-verify="LatitudeLongitude" type="text"/>
			                </div>
			            </div>
			        </div>
	       			 <!-- 隐藏部分 -->
			        <div class="layui-form-item" id="diass" style="display: none">
			        	<div class="layui-form-item">
				            <div class="layui-inline">
				                <label class="layui-form-label">标题</label>
				                <div class="layui-input-block">
				                    <input class="layui-input" name="title" data-set="title" type="text" placeholder="请输入标题"/>
				                </div>
				            </div>
			            </div>
			            <div class="layui-form-item">
			            	<div class="layui-inline">
			               		<label class="layui-form-label">灾情分级</label>
			                	<div class="layui-input-inline" style="width: 222px">
			                    	<select name="status">
										<option></option>
										{volist name="eventtype" id="vo" key="k"}
										<option value="{$k}">{$vo}</option>{/volist}
									</select>
			                	</div>
			            	</div>
			            	<div class="layui-inline">
			                	<label class="layui-form-label">告警开始<small>时间</small></label>
			                	<div class="layui-input-inline">
			                   		<input class="layui-input " id="startTime" name="startTime" placeholder="开始日期" type="text"  value="{$startTime|date='Y-m-d h:i:s',###}" />
			                	</div>
			            	</div>
			            	<div class="layui-inline">
			                	<label class="layui-form-label">接报人</label>
			                	<div class="layui-input-inline" style="width: 222px">                  
			                    	<select name="receiveId">
										<option></option>
										{volist name="userList" id="vo" }
										<option value="{$key}" {if condition="$userid eq $key"}selected{/if}>{$vo}</option>
										{/volist}
									</select>
			                	</div>
			            	</div>
			        	</div>
			
				        <div class="layui-form-item layui-form-text">
				            <label class="layui-form-label">威胁范围</label>
				            <div class="layui-input-block">
				                <textarea class="layui-textarea" name="threatenRange" data-set="threatenRange" placeholder="请输入内容"></textarea>
				            </div>
				        </div>
				        <div class="layui-form-item layui-form-text">
				            <label class="layui-form-label">详细情况</label>
				            <div class="layui-input-block">
				                <textarea class="layui-textarea" name="detail" data-set="detail" placeholder="请输入内容"></textarea>
				            </div>
				        </div>
			
			          	<div class="layui-form-item">
							<label class="layui-form-label">实景图&nbsp;<i class="layui-icon arrow">　</i></label>
							<div class="layui-input-block">
								<div class="layui-upload">
									<button type="button" class="btn-upload" id="iconImg" data-url="{:url('admin/api.upload/upload')}"><i class="fa fa-plus"></i></button>
									<div class="layui-upload-list">
										<input class="layui-hide" type="text" name="pathInfo">
									</div>
								</div>
							</div>
						</div>
			       		<input type="hidden" value="1" name="eventType">
			    	</div>
			        <div class="layui-form-item" style="text-align:center;">
				        <div class="layui-inline">
				            <a href="#"><span class="help show" style="color:#1c7dfa;font-size:40px"><i class="fa fa-chevron-circle-down"></i></span></a>
				        </div>
			        </div>
			        <!--第2行-->
			        <div class="layui-form-item" id="disBtn">
			            <div class="layui-input-block">
			                <button class="layui-btn layui-btn-danger btn-alarm" lay-submit="" lay-filter="save" data-jump="{:url('duty/event/plan')}">立即告警</button>
			            </div>
			        </div>
				</form>
			</div>
		</div>
    </div>
 	<div class="park-content page-hide" id="page-events">
		<div id="events-list" class="maintab" >
 		<div class="content-title">
			<div class="title">
				<h3>{$breadCrumb[1]['title']}</h3>
				<form class="layui-form searchmsg" action="{:url('duty/event/search')}" style="display: inline" onsubmit="return false;">
				   <button class="search-btn" lay-submit lay-filter="search" @click="search()"><img src="__STATIC__/img/base/topsearch01.png"></button>
				   <div class="date-duration">
				   		<input class="search-input" name="keyword" type="text" placeholder="请输入标题关键字" id="keyword"  autocomplete="off">
						<div class="layui-input-inline">
							<input type="text" name="start" id="start" autocomplete="off" class="search-input" placeholder="开始日期">
						</div>
						<div class="layui-input-inline">
							<span>--</span>
						</div>
						<div class="layui-input-inline">
							<input type="text" name="end" id="end" autocomplete="off" class="search-input" placeholder="截止日期">
						</div>
				   	</div>
				</form>	
			</div>
		</div>
		<div class="layui-content" id="events_view">

				<div class="layui-row">
					<div class="layui-col-md6 event" v-for="items in data">
						<div class="ibox">
							<a >
								<img alt="image" class="img-responsive btn btn-block" v-if="items.pathInfo != ''" height="180" v-bind:src="'__PUBLIC__'+items.pathInfo">
								<img alt="image" class="img-responsive btn btn-block" v-else src="__STATIC__/img/duty/nopic.png"  height="180">
							</a>
						</div>
						<div class="tool" style="margin-top:5px;">
							<h4 style="color:white;font-weight:600;">{{items.title}}</h4>
		
							<p>
								<a href="#" v-bind:id="items.id"   class="detail" id="detail" @click="detail(items.id)" style="color:#34b2bf;">
									查看详情
								</a>|
								<a href="#" v-bind:id="items.id" class="position" id="position"  @click="position(items.dangerSourceId,items.enterpriseId)" style="color:#34b2bf;">
									查看位置
								</a>|
								<a href="#" v-bind:id="items.id" class="plan" @click="plan(items.reservePlanId)" style="color:#34b2bf;">
									查看预案
								</a>|
		
								<a href="#" v-bind:id="items.id" v-if="items.eventStatus==1" style="color:red;"  class="over" @click="over(items.id)" style="color:#34b2bf;">
									结束报警
								</a>
							</p>
						</div>
					</div>
				</div>
				<div class="more-events">
					<div class="layui-btn" @click="more()" id="more" ><i class="fa fa-angle-double-down"></i></div>
				</div>
			</div>
 		</div>
	</div>	
</div>




{/block}
{block name="script"}

<script type="text/javascript" src="__JS__/duty/event.js"></script>

<script src="__VUE__/vue.js"></script>

<script>
	var page = 2;
	var app2 = new Vue({
		el: '#events-list',
		data: {
			data:{$list}
		},
		methods: {
			more:function () {
				$.post("{:url('more')}",{page:page},function (obj) {
					if(obj.code == 1){
						app2.data = obj.data;
						page++;
					}else{
//						$('#more').text('没有更多');
						layer.msg('没有更多')
					}

				});
			},
			detail:function(id){
				layer.open({
					title:'事件详情',
					type: 2,
					shade:0,
					offset: ['20%','35%'],
					area: ['40%', '71%'],
					fix: false, //不固定
					maxmin: true,
					content:"detail/eventId/"+id,
					moveOut:true,
				});
			},
			position:function(id,eid){
				$.post("{:url('position')}",{dangerSourceId:id},function (obj) {
					var url="{:url('basic/enterprise/setBuilding')}"+'?position='+obj.position+"&enterprise="+eid;
					layer.open({
						title:'定位',
						type: 2,
						shade:0,
						offset: ['20%','35%'],
						area: ['25%', '42%'],
						fix: false, //不固定
						maxmin: true,
						content:url,
						moveOut:true,
					});
				});
			},
			plan:function(id){

				var url="{:url('duty/event/plan')}"+'?reservePlanId='+id;

				layer.open({
					title:'预案详情',
					type: 2,
					shade:0,
					offset: ['20%','35%'],
					area: ['40%', '71%'],
					fix: false, //不固定
					maxmin: true,
					content:url,
					moveOut:true,
				});
			},
			search:function(){

				layui.use(['form','jquery'],function(){
					var form = layui.form;
					var $ = layui.jquery;
					var url=$(".searchmsg").attr('action');
					form.on("submit(search)",function(data){
						$.post(url,{start:data.field.start,end:data.field.end,keyword:data.field.keyword},function(obj){
							app2.data = obj.data;
						})
					})
				})
			},

			over:function(id){
				var id =id;
				console.log(id);
				layer.confirm('确认结束预警吗?',function(){
					$.post("{:url('over')}",{id:id},function (obj){

						if(obj.code==1) {
							location.reload();
						}
					});
				})
			}

		}

	});

</script>



{/block}
